<ul class="p-4 lg:p-8" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<li>
		<article>
			<a
				rel="noopener noreferrer"
				href="#"
				class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12"
				[ngClass]="['hover:bg' + contrast]"
			>
				<h3
					class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9"
				>
					Earum at ipsa aliquid quis, exercitationem est.
				</h3>
				<time
					datetime=""
					[ngClass]="['text' + plainInv]"
					class="row-start-1 mb-1 md:col-start-1 xl:col-span-2"
				>
					Oct 13, 2020
				</time>
				<p
					class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0"
					[ngClass]="['text' + neutralInv]"
				>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe
					exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil
					necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit
					eveniet est.
				</p>
			</a>
		</article>
	</li>
	<li>
		<article>
			<a
				rel="noopener noreferrer"
				href="#"
				class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12"
				[ngClass]="['hover:bg' + contrast]"
			>
				<h3
					class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9"
				>
					Earum at ipsa aliquid quis, exercitationem est.
				</h3>
				<time
					datetime=""
					[ngClass]="['text' + plainInv]"
					class="row-start-1 mb-1 md:col-start-1 xl:col-span-2"
				>
					Oct 13, 2020
				</time>
				<p
					class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0"
					[ngClass]="['text' + neutralInv]"
				>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe
					exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil
					necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit
					eveniet est.
				</p>
			</a>
		</article>
	</li>
	<li>
		<article>
			<a
				rel="noopener noreferrer"
				href="#"
				class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12"
				[ngClass]="['hover:bg' + contrast]"
			>
				<h3
					class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9"
				>
					Earum at ipsa aliquid quis, exercitationem est.
				</h3>
				<time
					datetime=""
					[ngClass]="['text' + plainInv]"
					class="row-start-1 mb-1 md:col-start-1 xl:col-span-2"
				>
					Oct 13, 2020
				</time>
				<p
					class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0"
					[ngClass]="['text' + neutralInv]"
				>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe
					exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil
					necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit
					eveniet est.
				</p>
			</a>
		</article>
	</li>
	<li>
		<article>
			<a
				rel="noopener noreferrer"
				href="#"
				class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12"
				[ngClass]="['hover:bg' + contrast]"
			>
				<h3
					class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9"
				>
					Earum at ipsa aliquid quis, exercitationem est.
				</h3>
				<time
					datetime=""
					[ngClass]="['text' + plainInv]"
					class="row-start-1 mb-1 md:col-start-1 xl:col-span-2"
				>
					Oct 13, 2020
				</time>
				<p
					class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0"
					[ngClass]="['text' + neutralInv]"
				>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe
					exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil
					necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit
					eveniet est.
				</p>
			</a>
		</article>
	</li>
</ul>
